<template>
  <div class="contents">
    <PanelTitle title="贸易分析" />
    <div class="maps mt">
      <div>
        <div class="tabs">
          <div>买家分析</div>
        </div>
        <div ref="leftmaps" class="submap"></div>
      </div>
      <div>
        <div class="tabs">
          <div>卖家分析</div>
        </div>
        <div ref="rightmaps" class="submap"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import echarts from "@/components/echarts";
import PanelTitle from "../../component/PanelTitle.vue";
import http from "@/api/http";
import { env } from "@/utils/env";
import { fitChartSize } from "@/utils/dataUtil.js";

const leftmaps = ref(null);
const rightmaps = ref(null);

onMounted(async () => {
  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/operation/trader/statist",
    method: "get",
  });

  let leftydata = res.data.buyerStatistList.map((item) => {
    return item.province;
  });
  let leftbardata = res.data.buyerStatistList.map((item) => {
    return item.totalQuantity;
  });

  let rightydata = res.data.sellerStatistList.map((item) => {
    return item.province;
  });
  let rightbardata = res.data.sellerStatistList.map((item) => {
    return item.totalQuantity;
  });

  var leftChart = echarts.init(leftmaps.value);
  var rightChart = echarts.init(rightmaps.value);

  leftChart.setOption({
    grid: {
      left: "3%",
      right: "10%",
      bottom: "10%",
      top: "5%",
      containLabel: true,
    },
    tooltip: {
      show: true,
      trigger: "item",
    },
    xAxis: [
      {
        type: "value",
        splitNumber: 4,
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,0.09)", //线条颜色
            // type: "dashed", //线条样式，默认是实现，dashed是虚线
          },
        },
        min: 0,
        axisLabel: {
          textStyle: {
            color: "#7AFFFD",
            fontSize: fitChartSize(9),
          },
        },
      },
    ],
    yAxis: [
      {
        type: "category",
        data: leftydata,
        axisLabel: {
          textStyle: {
            color: "#7AFFFD",
            fontSize: fitChartSize(9),
          },
        },
        axisPointer: {
          type: "shadow",
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "出口金额（万元）",
        type: "bar",
        barWidth: fitChartSize(14),
        backgroundStyle: {
          color: "rgba(110, 193, 244, 1)",
        },
        itemStyle: {
          normal: {
            // label: {
            //   show: true,
            //   position: "top",
            //   textStyle: {
            //     color: "#fff",
            //     fontSize: 10,
            //   },
            // },
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "rgba(250, 216, 112, 0.08)",
              },
              {
                offset: 1,
                color: "rgba(250, 216, 112, 1)",
              },
            ]),
          },
        },
        data: leftbardata,
      },
    ],
  });

  rightChart.setOption({
    grid: {
      left: "3%",
      right: "10%",
      bottom: "10%",
      top: "5%",
      containLabel: true,
    },
    tooltip: {
      show: true,
      trigger: "item",
    },
    xAxis: [
      {
        type: "value",
        splitNumber: 4,
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,0.09)", //线条颜色
            // type: "dashed", //线条样式，默认是实现，dashed是虚线
          },
        },
        min: 0,
        axisLabel: {
          textStyle: {
            color: "#7AFFFD",
            fontSize: fitChartSize(9),
          },
        },
      },
    ],
    yAxis: [
      {
        type: "category",
        data: rightydata,
        axisLabel: {
          textStyle: {
            color: "#7AFFFD",
            fontSize: fitChartSize(9),
          },
        },
        axisPointer: {
          type: "shadow",
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "出口金额（万元）",
        type: "bar",
        barWidth: fitChartSize(14),
        backgroundStyle: {
          color: "rgba(110, 193, 244, 1)",
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "rgba(55, 137, 255, 0.08)",
              },
              {
                offset: 1,
                color: "rgba(55, 137, 255, 1)",
              },
            ]),
          },
        },
        data: rightbardata,
      },
    ],
  });
});
</script>

<style scoped lang="scss">
.contents {
  background: linear-gradient(
    to bottom,
    rgba(5, 79, 99),
    rgba(5, 79, 99, 0.1),
    rgba(5, 79, 99)
  );
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);
  .mt {
    margin-top: vh(-40);
  }
}

.tabs {
  width: vw(66);
  height: vh(20);
  line-height: vh(20);
  padding: 0 2px;
  background: rgba(8, 35, 53, 0.5);
  border-radius: vh(10);
  text-align: center;
  margin: vh(10) 0 0 vw(10);
}
.tabs > div {
  height: 100%;
  font-family: Source Han Sans CN;
  font-weight: bold;
  font-size: vh(12);

  background: linear-gradient(0deg, #7ae3ff 0%, #ffffff 60%);
  color: transparent;
  -webkit-background-clip: text;
}

.maps {
  display: flex;
  align-items: center;
}
.maps > div {
  width: 50%;
}
.submap {
  height: vh(165);
  width: 100%;
}
</style>